import React, { Component } from 'react'
import "./discount.less"
import { Tabs, Card } from 'antd-mobile';
import Header from '../../components/header/header';
import { reqgetcoupon } from '../../http/api';

export default class discount extends Component {
    constructor() {
        super();
        this.state = {
            //初始化
            arr: ["未使用", "已使用", "已失效"],
            info: [],
            n: 0,

        }
    }
    //组件将要渲染
    UNSAFE_componentWillMount() {
        reqgetcoupon().then(res => {
            if (res.data.code == 200) {
                this.setState({
                    info: res.data.list,
                })
                // info.forEach((item)=>{
                //     info.begintime=(info.begintime).date
                // })
                console.log(res);
            }
        })
    }

    render() {
        let { arr, info, n } = this.state
        return (
            <div className='discount'>
                <Header text="优惠券"></Header>
                <div className='con'>
                    <Tabs onChange={(e)=>this.setState({n:Number(e)})}>
                        {arr.map((item, index) => {
                            return (
                                <Tabs.Tab title={item} key={index}>
                                    {info.length > 0 ? (
                                        <>
                                            {info[n].content.map((i) => {
                                                return (
                                                    <Card key={i.id} onClick={()=>{}}>
                                                        <div>
                                                            <div>
                                                                <p>{i.money}</p>
                                                                <p>满{i.limit_money}可用</p>
                                                            </div>
                                                            <div>
                                                                <p>{i.title}</p>
                                                                <p><span>{i.begintime}</span>至<span>{i.endtime}</span></p>
                                                            </div>
                                                        </div>
                                                        <hr />
                                                        <div>{i.description}</div>
                                                    </Card>
                                                )
                                            })}
                                        </>
                                    ) : (<Card title='' onClick={(e) => { console.log(e); }}>
                                        暂无数据
                                    </Card>)}
                                </Tabs.Tab>
                            )
                        })}
                    </Tabs>
                </div>
                {/* <div>info：{JSON.stringify(this.state.info)}</div> */}
            </div>
        )
    }
    componentDidUpdate() {
        console.log(this.state.info[0].content);
    }
}
